import React, { memo, useState } from 'react'
import { FilterWrapper } from './style'
import filterDate from '@/assets/data/filter_data.json'
import classNames from 'classnames'

const EntireFilter = memo(() => {
  const [selectItems, setSelectItems] = useState([])

  function handleItemClick(item) {
    // 不可变的力量
    let newItems = [...selectItems]
    // 有则去除,无则添加
    if (newItems.includes(item)) {
      newItems = newItems.filter((filterItem) => filterItem !== item)
    } else {
      newItems.push(item)
    }
    setSelectItems(newItems)
  }

  return (
    <FilterWrapper>
      <div className="filter">
        {filterDate.map((item, index) => {
          return (
            <div className={classNames('item', { active: selectItems.includes(item) })} key={item} onClick={() => handleItemClick(item)}>
              {item}
            </div>
          )
        })}
      </div>
    </FilterWrapper>
  )
})

export default EntireFilter
